/**
* 图表界面
*/
<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <div class="title">
      项目分析:
    </div>
    <div class="box">
      <div class="content-box">
        <div class="left">
          {{ totalNum }}
          <div>
            错误总量（年）
          </div>
        </div>
        <div class="right">
          <img src="../assets/删除文件.png" alt="">
        </div>
      </div>
      <div class="content-box">
        <div class="left">
          {{ equilNum.toFixed(2)  }}
          <div>
            平均指标(年)
          </div>
        </div>
        <div class="right">
          <img src="../assets/29数量分析.png" alt="">
        </div>
      </div>
      <div class="content-box">
        <div class="left">
          {{ 4 }}
          <div>
            成员总量
          </div>
        </div>
        <div class="right">
          <img src="../assets/成员管理.png" alt="">
        </div>
      </div>
    </div>
    <!-- 统计图 -->
    <el-row :gutter="23">
      <el-col :span="8" class="text-c" style="width: 50%;">
        <div class="st-gbox">
          <div class="cavasbox" ref="SCEchart"></div>
        </div>
      </el-col>
      <el-col :span="8" class="text-c" style="width: 50%;">
        <div class="st-gbox">
          <div class="cavasbox" ref="SUMEchart"></div>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图 -->
    <div>
      <el-row :gutter="23">
        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="payEchart"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      machineNo: '',
      type: 'day',
      queryParams: {},
      //  项目性能指标
      SUMoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '性能分析指数',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '性能分析指数',
          //   type: 'bar',
          type: 'line',
          barGap: 0,
          data: [],
          barWidth: 10,
          itemStyle: {
            color: "#108ff9"
          }
        }]
      },
      // 错误总数
      SCEoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '错误总数',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '错误总数',
          type: 'bar',
          barGap: 0,
          data: [],
          barWidth: 10,
          itemStyle: {
            normal: {
              color: '#c23531',
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            emphasis: {
              color: '#c23531',
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      },
      //  错误类型统计
      payoption: {
        backgroundColor: '#2c343c',
        title: {
          text: '错误类型统计',
          left: 10,
          top: 5,
          textStyle: {
            fontSize: 12,
            color: '#ccc'
          }
        },

        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: '错误类型统计',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [],
            roseType: 'radius',
            label: {
              normal: {
                textStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              }
            },
            itemStyle: {
              normal: {
                color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      },
      totalNum: 0,
      equilNum: 0
    }
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.queryParams = this.$route.query
    this.SCEoption.series[0].data = JSON.parse(this.queryParams.projectCount)
    this.SUMoption.series[0].data = this.computedResult
    const payList = []
    payList.push({
      value: parseInt(this.queryParams.dbCount),
      name: '数据库错误'
    })
    payList.push({
      value: parseInt(this.queryParams.typeCount),
      name: '类型错误'
    })
    payList.push({
      value: parseInt(this.queryParams.netCount),
      name: '网络错误'
    })
    payList.push({
      value: parseInt(this.queryParams.serveCount),
      name: '服务器错误'
    })
    payList.push({
      value: parseInt(this.queryParams.tsCount),
      name: 'Ts校验错误'
    })
    this.payoption.series[0].data = payList.sort(function (a, b) { return a.value - b.value; })
  },
  computed: {
    // 定义一个计算属性，它依赖于 originalNumber
    computedResult() {
      let result = []
      for (let i = 0; i < this.SCEoption.series[0].data.length; i++) {
        this.totalNum += this.SCEoption.series[0].data[i]
        this.equilNum += ((1 - this.SCEoption.series[0].data[i] / 1000)/12)
        // 计算每个元素减去 1 并除以 1000，将结果放入新数组中
        result.push((1 - this.SCEoption.series[0].data[i] / 1000).toFixed(2));
      }
      // 返回计算结果的数组
      return result;
    }
  },
  // 挂载结束状态(里面是操作)
  mounted() {
    this.getSCE()
    this.getSUM()
    this.getpay()
  },
  // 里面的函数只有调用才会执行
  methods: {
    // 交易总笔数
    getSCE() {
      this.chartInstance1 = this.$echarts.init(this.$refs.SCEchart);
      this.chartInstance1.setOption(this.SCEoption)
    },
    // 交易总金额
    getSUM() {
      this.chartInstance2 = this.$echarts.init(this.$refs.SUMEchart);
      this.chartInstance2.setOption(this.SUMoption)
    },
    // 支付方式统计
    getpay() {
      this.chartInstance3 = this.$echarts.init(this.$refs.payEchart);
      this.chartInstance3.setOption(this.payoption)
    },
  }
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #E4E7ED;
  background: #F5F5F5;
  border-radius: 10px;
  padding: 20px;
}

.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}

.stsearch {
  text-align: center;
}

.text-c {
  text-align: center;
}

.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}

.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}

.box {
  display: flex;
  margin-top: 20px;
}

.content-box {
  width: calc(100% / 3);
  display: flex;
  padding: 15px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
  border-radius: 5px;
  margin-left: 7.5px;
  margin-right: 7.5px;
  box-shadow: 5px 5px 5px #DCDFE6;
  transition: transform 0.3s ease;
}

.left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-right: 10px;
}

.left div {
  margin-top: 5px;
  font-size: 12px;
}

.right {
  margin-left: 50px;
}

img {
  height: 60px;
  width: 60px;
}

.content-box:hover {
  cursor: pointer;
  transform: translate(-5px, -5px);
  transition: transform 0.3s ease;
}
</style>